<template>
  <div>
    <!-- Header -->
    <div class="header bg-gradient-success py-8 py-lg-9 pt-lg-9">
      <div class="separator separator-bottom separator-skew zindex-100">
        <svg
          x="0"
          y="0"
          viewBox="0 0 2560 50"
          preserveAspectRatio="none"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
        >
          <polygon
            class="fill-default"
            points="2560 0 2560 100 0 100"
          ></polygon>
        </svg>
      </div>
    </div>
    <!-- Page content -->
    <b-container class="mt--8 pb-5">
      <!-- Table -->
      <b-row class="justify-content-center">
        <b-col lg="5" md="">
          <b-card no-body class="bg-secondary border-0">
            <b-card-body class="px-lg-5 py-lg-5">
              <div class="text-center text-muted mb-4">
                <small style="font-size: 20px">绑定您的学号以继续</small>
              </div>
              <div class="myDiv text-center mb-2">
                <el-input
                  class="myId"
                  prefix-icon="ni ni-circle-08"
                  placeholder="学号"
                  autofocus="true"
                  v-model="userId"
                >
                </el-input>
              </div>

              <div class="text-center">
                <base-button
                  type="info"
                  native-type="submit"
                  class="myButton my-4"
                  >继续</base-button
                >
              </div>
            </b-card-body>
          </b-card>
        </b-col>
      </b-row>
    </b-container>
  </div>
</template>
<script>
export default {
  name: "bindAccount",
  data() {
    return {
      userId: "",
    };
  },
  methods: {
    onSubmit() {
      // this will be called only after form is valid. You can do an api call here to register users
    },
  },
};
</script>
<style scoped>
.myButton {
  width: 120px;
  background-color: #5e72e4;
}
</style>
